<template>
	<view class="bg">
		<xl-navbar title="Transition动画" fixed shadow></xl-navbar>
		<xl-transition :show="show" :enterMode="enderMode" :leaveMode="leaveMode">
			<xl-empty></xl-empty>
		</xl-transition>
		<view class="radio-box flex-around">
			<view>
				<view class="radio-title">入场动画</view>
				<xl-radio class="" v-model="enderMode" :items="modes" direction="column"></xl-radio>
			</view>
			<view>
				<view class="radio-title">入场动画</view>
				<xl-radio class="" v-model="leaveMode" :items="modes" direction="column"></xl-radio>
			</view>
		</view>
		<xl-button text="显示" :width="690" :margin="[0,30]" class="btn" type="primary" @click="change"></xl-button>
	</view>
</template>

<script setup>
	import { ref, onMounted, computed } from "vue";
	const show = ref(false)
	const enderMode = ref('fade')
	const leaveMode = ref('fade')
	
	const modes = ref([
		{id: 'fade', name:'淡入'},
		{id: 'zoom', name:'缩放'},
		{id: 'fade-zoom', name:'缩放淡入'},
		{id: 'fade-up', name:'上滑淡入'},
		{id: 'fade-down', name:'下滑淡入'},
		{id: 'fade-left', name:'左滑淡入'},
		{id: 'fade-right', name:'右滑淡入'},
		{id: 'slide-up', name:'上滑进入'},
		{id: 'slide-down', name:'下滑进入'},
		{id: 'slide-left', name:'左滑进入'},
		{id: 'slide-right', name:'右滑进入'}
	])
	
	function change(){
		show.value = !show.value
	}
</script>
<style lang="scss" scoped>
	.radio-box{
		width: 690rpx;
		position: fixed;
		left: 30rpx;
		bottom: 150rpx;
		.radio-title{
			margin-bottom: 30rpx;
			text-align: center;
		}
	}
	.btn{
		position: fixed;
		bottom: 20rpx;
	}
</style>